<template>
  <div class="fixed-table-actionbar">
    <div class="search-bar">
      <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
        <el-form-item v-if="workOrderTypeVisible===''">
          <el-select v-model="formItem.s_type" class="select_input" clearable placeholder="请选择工单类型" @change="search">
            <el-option-group
              v-for="group in workOrderTypes"
              :key="group.label"
              :label="group.label"
            >
              <el-option v-for="(item) in group.options" :key="item.orderType" :label="item.name" :value="item.orderType" />
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formItem.s_status" class="select_input" clearable placeholder="请选择工单状态" @change="search">
            <el-option v-for="(item) in statusList" :key="item.code" :label="item.text" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formItem.s_globalSearch"
            clearable
            placeholder="请输入工单号/标题"
            @keyup.enter.native="search"
            @change="onGlobeSearchInputChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button plain icon="el-icon-search" @click="search" />
        </el-form-item>
      </el-form>
    </div>
    <div v-if="newVisible" class="action-bar">
      <!-- <el-button type="primary" size="mini" icon="el-icon-plus" @click="add">新建</el-button> -->
    </div>
    <InitForm v-if="dialogFormVisible" :form-key="formKey" :work-order-type="formItem.s_type" @cancelNewOrderForm="cancelNewOrderForm" />
  </div>
</template>

<script>
import InitForm from './initForm'
import { findByDictionaryType } from '@neu/dcam-ui/api/dictionary'
import { AUTHORITY as cardAuthority } from '@neu/dcam-ui/utils/constants'
// 定义一个查询表单原始项
const formItem = {
  s_type: '',
  s_globalSearch: '',
  s_status: null
}

export default {
  name: 'WorkerOrderFilter',
  components: {
    InitForm
  },
  props: {
    formKey: {
      reuqired: true,
      type: String,
      default: ''
    },
    workOrderType: {
      required: true,
      default: '',
      type: String
    },
    newVisible: {
      required: true,
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      // 当前登录的角色
      myRoles: this.$store.getters.roles || [],
      formItem: {
        ...formItem
      },
      workOrderTypeVisible: this.workOrderType,

      /** 工单状态 */
      statusList: [],
      /** 弹窗控制 */
      dialogFormVisible: false
    }
  },
  computed: {
    // 卡片
    workOrderTypes: function() {
      // 判断当前用户的角色
      const roles = this.myRoles
      const codes = []
      const all = []
      const group = {
        kj: {
          label: '科技公司',
          options: []
        },
        sl: {
          label: '总行',
          options: []
        }
      }
      roles.forEach(element => {
        let shows = []
        if (this.newVisible) {
          shows = cardAuthority[element] ? cardAuthority[element].quickEntry : []
        } else {
          shows = cardAuthority[element] ? cardAuthority[element].task : []
        }

        shows.forEach(l => {
          if (!codes.includes(l.orderType)) {
            group[l.type].options.push(l)
            codes.push(l.orderType)
          }
        })
      })

      Object.keys(group).forEach(l => {
        if (group[l].options.length > 0) {
          all.push(group[l])
        }
      })
      return all
    }
  },
  created() {
    this.formItem.s_type = this.workOrderType
    // findByDictionaryType('workorderType').then(response => {
    //   this.workOrderTypes = response.data
    // })
    findByDictionaryType('workorderStatus').then(response => {
      this.statusList = response.data
    })
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    },
    onChange: function(val) {
      this.$parent.onResize()
    },
    onGlobeSearchInputChange(value) {
      if (value === '') {
        this.search()
      }
    },
    // 新建用户按钮点击处理
    add() {
      if (!this.formItem.s_type) {
        return this.$message({
          showClose: true,
          message: '请先选择工单类型',
          type: 'error'
        })
      }
      this.dialogFormVisible = true
    },

    cancelNewOrderForm(data) {
      this.dialogFormVisible = false
      if (data === 'refresh') {
        this.$parent.refresh()
      }
    }
  }
}
</script>
